<template>
  <div class="app-container home">
    <div class="box1 bg_f4f7fe full_w">
      <div class="innerwrapper">
        <div class="f-60 c_000 textcenter">快速制作 抽奖活动页面</div>
        <div class="mt_15 c_000 mb_32 textcenter f-24">
          免费使用 不限奖品数量 不限使用人数
        </div>
        <div class="flexcenter mb_60">
          <div class="btnclass flexcenter f-24 c_fff" @click="goPage('Template')">免费创建活动</div>
        </div>
        <div class="video-img">
          <video
            autoplay="autoplay"
            muted="muted"
            loop="loop"
            src='https://lottery.yywlcm.com/upload/video/20230818/video.mp4'
          ></video>
          <!-- https://lottery.yywlcm.com/upload/video/20230818/b568cee80b581344d4fb2a946ee8c5bf.mp4 -->
          <!-- src="https://img.yfpoll.com/uploads/20221103/5f15540b982f3ded8a771b0972907133.mp4" -->
        </div>
      </div>
    </div>
    <div class="box2">
      <div class="f-60 c_000 textcenter mb_15">不仅仅是个抽奖活动</div>
      <div class="textcenter f-24">丰富的营销功能</div>
    </div>
    <div class="box3 bg_f4f7fe">
      <div class="innerwrapper">
        <el-row :gutter="60">
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <div class="full_w bg_fff p_20">
              <div class="imggn mb_16">
                <img src="@/assets/images/one1.png" alt="">
              </div>
              <div class="flexcenter mb_32 f-20 c_000">品牌传播</div>
              <div class="mb_32">
                <div class="flex c_000 f-18 mb_10 aligncenter"><div class="dot mr_8"></div> 开屏广告 </div>
                <div class="pl_25 f-16 c_606">用户进入活动第一时间曝光您的品牌</div>
              </div>
              <div class="mb_32">
                <div class="flex c_000 f-18 mb_10 aligncenter"><div class="dot mr_8"></div> 活动元素自定义 </div>
                <div class="pl_25 f-16 c_606">嵌入您的品牌元素</div>
              </div>
              <div class="mb_32">
                <div class="flex c_000 f-18 mb_10 aligncenter"><div class="dot mr_8"></div> 弹窗广告 </div>
                <div class="pl_25 f-16 c_606">每一次互动都是一场成功的营销</div>
              </div>
              <div class="c_fff f-18 commhover bgbtn flexcenter mb_15">了解详情</div>
            </div>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <div class="full_w bg_fff p_20">
              <div class="imggn mb_16">
                <img src="@/assets/images/one2.png" alt="">
              </div>
              <div class="flexcenter mb_32 f-20 c_000">获客拉新</div>
              <div class="mb_32">
                <div class="flex c_000 f-18 mb_10 aligncenter"><div class="dot mr_8"></div> 派奖多样 </div>
                <div class="pl_25 f-16 c_606">派奖方式多样化，线上+线下组合拳</div>
              </div>
              <div class="mb_32">
                <div class="flex c_000 f-18 mb_10 aligncenter"><div class="dot mr_8"></div> 线上涨粉 </div>
                <div class="pl_25 f-16 c_606">抽奖模版多样化，更有经典大转盘活动</div>
              </div>
              <div class="mb_32">
                <div class="flex c_000 f-18 mb_10 aligncenter"><div class="dot mr_8"></div> 自定义跳转链接 </div>
                <div class="pl_25 f-16 c_606">将用户引导至任意产品</div>
              </div>
              <div class="c_fff f-18 commhover bgbtn flexcenter mb_15">了解详情</div>
            </div>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <div class="full_w bg_fff p_20">
              <div class="imggn mb_16">
                <img src="@/assets/images/one3.png" alt="">
              </div>
              <div class="flexcenter mb_32 f-20 c_000">留存活跃</div>
              <div class="mb_32">
                <div class="flex c_000 f-18 mb_10 aligncenter"><div class="dot mr_8"></div> 活动周期 </div>
                <div class="pl_25 f-16 c_606">可设置每日抽奖活动，每日中奖机会</div>
              </div>
              <div class="mb_32">
                <div class="flex c_000 f-18 mb_10 aligncenter"><div class="dot mr_8"></div> 分期发放奖品 </div>
                <div class="pl_25 f-16 c_606">系统自研算法，持续发放奖品</div>
              </div>
              <div class="mb_32">
                <div class="flex c_000 f-18 mb_10 aligncenter"><div class="dot mr_8"></div> 可视化数据 </div>
                <div class="pl_25 f-16 c_606">实时观测访问量、参与活动人数情况</div>
              </div>
              <div class="c_fff f-18 commhover bgbtn flexcenter mb_15">了解详情</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="box4">
      <div class="innerwrapper">
        <div class="f-60 c_000 textcenter mb_15">满足您的个性化需求</div>
        <div class="textcenter f-24 mb_60">丰富的功能设置</div>
        <el-row :gutter="0">
          <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
            <div class="gnbox flexcolumn aligncenter">
              <img src="@/assets/images/icon_h1.png" alt="" class="gnicon mb_32">
              <div class="textcenter c_000 f-18 mb_16">支持引导关注涨粉</div>
              <div class="c_606 f-16">
                支持所有类型公众号实现先关注后抽奖，个人订阅号也支持哦
              </div>
            </div>
          </el-col>
          <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
            <div class="gnbox flexcolumn aligncenter">
              <img src="@/assets/images/icon_h2.png" alt="" class="gnicon mb_32">
              <div class="textcenter c_000 f-18 mb_16">支持多端抽奖</div>
              <div class="c_606 f-16">
                支持在H5、小程序举办抽奖活动，满足您的所有需求
              </div>
            </div>
          </el-col>
          <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
            <div class="gnbox flexcolumn aligncenter">
              <img src="@/assets/images/icon_h3.png" alt="" class="gnicon mb_32">
              <div class="textcenter c_000 f-18 mb_16">支持个人公众号授权</div>
              <div class="c_606 f-16">
                可绑定自己的公众号，用户参与抽奖将看到您的公众号授权窗口
              </div>
            </div>
          </el-col>
          <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
            <div class="gnbox flexcolumn aligncenter">
              <img src="@/assets/images/icon_h4.png" alt="" class="gnicon mb_32">
              <div class="textcenter c_000 f-18 mb_16">支持添加商品广告</div>
              <div class="c_606 f-16">
                支持在抽奖页面底部增加商品广告展示，给您的商品带来曝光量
              </div>
            </div>
          </el-col>
          <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
            <div class="gnbox flexcolumn aligncenter">
              <img src="@/assets/images/icon_h5.png" alt="" class="gnicon mb_32">
              <div class="textcenter c_000 f-18 mb_16">免费使用无限制</div>
              <div class="c_606 f-16">
                抽奖人数、中奖次数无限制，支持一键导出中
              </div>
            </div>
          </el-col>
          <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
            <div class="gnbox flexcolumn aligncenter">
              <img src="@/assets/images/icon_h6.png" alt="" class="gnicon mb_32">
              <div class="textcenter c_000 f-18 mb_16">支持扫码核销</div>
              <div class="c_606 f-16">
                手机端扫码，即可为客户核销兑奖，为您节约宝贵时间
              </div>
            </div>
          </el-col>
          <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
            <div class="gnbox flexcolumn aligncenter">
              <img src="@/assets/images/icon_h7.png" alt="" class="gnicon mb_32">
              <div class="textcenter c_000 f-18 mb_16">丰富的功能设置</div>
              <div class="c_606 f-16">
                可自定义用户领奖信息、可限制抽奖地区、支持生成兑换码
              </div>
            </div>
          </el-col>
          <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
            <div class="gnbox flexcolumn aligncenter">
              <img src="@/assets/images/icon_h8.png" alt="" class="gnicon mb_32">
              <div class="textcenter c_000 f-18 mb_16">丰富的应用场景</div>
              <div class="c_606 f-16">
                可应用于电商、餐饮、美食、教育、旅游等多个场景营销推广
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="box4">
      <div class="f-60 c_000 textcenter mb_15">他们都在用天天抽奖</div>
      <div class="textcenter f-24 mb_60">来自互联网巨头、政府组织、知名高校等各行</div>
      <div class="swiper-container1 mb_32">
        <div class="swiper-wrapper">
            <div class="swiper-slide swiper-slide1" v-for="(item,index) in imgs1" :key="index"><img :src="item" alt="" ></div>
        </div>
      </div>
      <div class="swiper-container2">
        <div class="swiper-wrapper">
            <div class="swiper-slide swiper-slide1" v-for="(item,index) in imgs2" :key="index"><img :src="item" alt="" ></div>
        </div>
      </div>
    </div>
    <div class="bottonbg box4 flexcolumn aligncenter">
      <div class="f-36 c_000 mb_32">免费使用天天抽奖 实现精准营销</div>
      <div class="btnclass flexcenter f-24 c_fff" @click="goPage('Template')">立即创建</div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'; // 注意引入的是Swiper
import 'swiper/css/swiper.min.css';
// import { monthCount } from '@/api/home';
export default {
  data() {
    return {
      imgs1:[require('@/assets/images/bj1.png'),require('@/assets/images/bj2.png'),require('@/assets/images/bj3.png'),require('@/assets/images/bj4.png'),require('@/assets/images/bj5.png')],
      imgs2:[require('@/assets/images/bj6.png'),require('@/assets/images/bj7.png'),require('@/assets/images/bj8.png'),require('@/assets/images/bj9.png'),require('@/assets/images/bj10.png')]
    };
  },
  components: {},
  mounted(){
    // this.getMonthCount()
    var mySwiper1 = new Swiper('.swiper-container1', {
			// config...
      loop: true,
      slidesPerView : 5,
      speed:2500,
      autoplay: {
        delay: 2000,
        disableOnInteraction: false,
        waitForTransition: false,
      },
      autoplay:true,
		})
    var mySwiper2 = new Swiper('.swiper-container2', {
			// config...
      loop: true,
      slidesPerView : 5,
      speed:2500,
      autoplay: {
        // delay: 2000,
        // disableOnInteraction: false,
        // waitForTransition: false,
        reverseDirection: true,
      },
      // autoplay:true,
		})
  },
  methods: {

    getMonthCount(){
      monthCount().then(res=>{
        // console.log(res)
      })
    },

    goPage(name){
      this.$router.push({name})
    },

  },
};
</script>

<style lang="scss" scoped>
.bg_f4f7fe{
  background-color: #f4f7fe;
}
.box1 {
  padding: 68px 0;
  height: 760px;
  min-width: 1400px;
}
.btnclass {
  width: 300px;
  height: 60px;
  background: linear-gradient(90deg, #2693ff 0%, #2672ff 100%);
  box-shadow: 3px 8px 16px 0px rgba(0, 98, 255, 0.5);
  border-radius: 30px;
}
.video-img{
  max-width: 1200px;
  height: 634px;
  margin: auto;
  box-shadow: 0px 3px 20px 0px rgba(0,0,0,0.27);
  border-radius: 8px;
  overflow: hidden;
  
  video{
    width: 100%;
    height: 634px;
  }
}
.box2{
  height: 480px;
  padding-top: 280px;
  min-width: 1400px;
  overflow-y: hidden;
}
.box3{
  padding: 64px;
  padding-top: 144px;
  min-width: 1400px;
  overflow: hidden;
}
.dot{
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #4A73FF;
}
.bgbtn{
  width: 211px;
  height: 37px;
  background: #4A73FF;
  border-radius: 4px;
  margin: auto;
}
.imggn{
  width: 160px;
  height: 176px;
  margin: auto;
  // border: 1px solid #D8D8D8;
  margin-top: -88px;

  img{
    width: 100%;
    // height: 100%;
  }
}
.box4{
  padding: 64px 0;
  min-width: 1400px;
  overflow: hidden;
}
.gnbox{
  width: 100%;
  padding: 32px;
  &:hover{
    box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.27);
  }
  .gnicon{
    width: 110px;
    height: 110px;
  }
}
.swiper-container{
  overflow: initial;
}
.swiper-slide{
  width: 334px;
  height: 100px;
  box-shadow: 4px 8px 16px 0 rgba(0,0,0,.06);
  border-radius:4px;
  border-radius:#fff;
  margin-right: 64px;
  img{
    width: 100%;
    height: 100%;
  }
}
.bottonbg{
  height: 270px;
  background: url('~@/assets/images/hbg.png') 100% 100% no-repeat;
  background-size: cover;
}
// .btnclass{
  
// height: 60px;
// background: linear-gradient(90deg, #2693FF 0%, #2672FF 100%);

// box-shadow: 0px 8px 16px 0px rgba(0,98,255,0.5);
// }
</style>